<template>
	<view class="order-manage">
		<!-- 顶部搜索及筛选区域 -->
		<view class="top-bar">
			<view class="cardform" labelPosition="left">
				<view class="form-item">
					<view class="form-label">负责人:</view>
					<view class="form-value">{{ verification.director || '未填写' }}</view>
				</view>
				<view class="form-item">
					<view class="form-label">身份证号码:</view>
					<view class="form-value">{{ verification.idCard || '未填写' }}</view>
				</view>
				<view class="form-item">
					<view class="form-label">手机号:</view>
					<view class="form-value">{{ verification.mobile || '未填写' }}</view>
				</view>
				<view class="form-item">
					<view class="form-label">店名:</view>
					<view class="form-value">{{ merchantsinfo.name || '未填写' }}</view>
				</view>
				<view class="form-item">
					<view class="form-label">工商营业持照号码:</view>
					<view class="form-value">{{ verification.businessLicenseId || '未填写' }}</view>
				</view>
				<view class="form-item">
					<view class="form-label">经营区域:</view>
					<view class="form-value">{{ merchantsinfo.operatingArea || '未填写' }}</view>
				</view>
				<view class="form-item">
					<view class="form-label">地址:</view>
					<view class="form-value">{{ merchantsinfo.address || '未填写' }}</view>
				</view>
			</view>
			
			<view class="cardform" labelPosition="left">
				<view class="section-title">商家简介</view>
				<view class="description-content">{{ merchantsinfo.description || '暂无简介' }}</view>
			</view>
			
			<view class="cardform" labelPosition="left">
				<view class="section-title">身份证正反面照片</view>
				<view class="image-group">
					<image 
						:src="verification.front"
						mode="widthFix"
						class="info-image"
						alt="身份证正面">
					</image>
					<image 
						:src="verification.opposite" 
						mode="widthFix"
						class="info-image"
						alt="身份证反面">
					</image>
				</view>
			</view>
			
			<view class="cardform" labelPosition="left">
				<view class="section-title">营业持照</view>
				<view class="image-group">
					<image 
						:src="verification.businessLicenseImg"
						mode="widthFix"
						class="info-image"
						alt="营业执照">
					</image>
				</view>
			</view>
			
			<view class="cardform" labelPosition="left">
				<view class="section-title">门店照片</view>
				<view class="image-group">
					<image 
						:src="merchantimg.img"  
						mode="widthFix"
						class="info-image"
						alt="门店照片">
					</image>
				</view>
			</view>
		</view>
		
		<view class="button-container">
			<u-button 
				text="修改" 
				class="modify-button"
				@click="handleModify"
			></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchantsinfo: {},
				verification: {},
				merchantimg:{}
			}
		},
		methods: {
			// 可以添加修改按钮的点击事件处理
			handleModify() {
				// 跳转到修改页面或打开修改弹窗
				console.log('点击了修改按钮');
				uni.navigateTo({
					url:'/pages/modifymerchant/modifymerchant'
				})
			}
		},
		onLoad() {
			// 获取存储的数据
			const merchantData = uni.getStorageSync('merchant');
			const verificationData = uni.getStorageSync('verification');
			this.merchantimg=uni.getStorageSync('merchantimg')
			// 确保数据是对象类型
			this.merchantsinfo = typeof merchantData === 'object' && merchantData !== null 
				? merchantData 
				: {};
				
			this.verification = typeof verificationData === 'object' && verificationData !== null
				? verificationData
				: {};
				
			// 打印数据确认
			console.log('商家信息:', this.merchantsinfo);
			console.log('验证信息:', this.verification);
		}
	}
</script>

<style>
	.order-manage {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 100rpx; /* 为底部按钮留出空间 */
	}

	/* 顶部区域 */
	.top-bar {
		padding: 20rpx;
		background-color: #2979ff;
	}

	/* 卡片样式 */
	.cardform {
		width: 90%;
		padding: 30rpx 5%;
		border-radius: 15rpx;
		background-color: white;
		margin-bottom: 20rpx;
	}

	/* 表单项目样式 */
	.form-item {
		display: flex;
		margin-bottom: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.form-item:last-child {
		border-bottom: none;
	}

	.form-label {
		font-weight: bold;
		width: 240rpx; /* 固定标签宽度，避免布局错乱 */
		color: #333;
	}

	.form-value {
		flex: 1; /* 让值占满剩余空间 */
		color: #666;
		word-break: break-all; /* 长文本自动换行 */
	}

	/*  section标题 */
	.section-title {
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
	}

	/* 简介内容 */
	.description-content {
		color: #666;
		line-height: 1.6; /* 增加行高，提高可读性 */
	}

	/* 图片组样式 */
	.image-group {
		display: flex;
		flex-wrap: wrap; /* 允许图片换行 */
		gap: 30rpx; /* 图片之间的间距 */
		padding: 10rpx 0;
	}

	/* 图片样式 */
	.info-image {
		width: 200rpx;
		height: 200rpx;
		object-fit: cover; /* 保持图片比例，填充容器 */
		border-radius: 8rpx;
	}

	/* 按钮容器 */
	.button-container {
		display: flex;
		justify-content: center;
		padding: 30rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #f5f5f5;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	/* 修改按钮样式 */
	.modify-button {
		color: white;
		background-color: blueviolet;
		border-radius: 20rpx;
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>
